<template>
  <div class="wrap">
    <div class="ech-title">
      <p>过去24小时数据分析</p>
      <ul>
        <li>
          <img src="@/assets/img/nav1.png" alt />
          <span>订单数</span>
        </li>
        <li>
          <img src="@/assets/img/nav2.png" alt />
          <span>充值金额</span>
        </li>
        <li>
          <img src="@/assets/img/nav3.png" alt />
          <span>销售额</span>
        </li>
      </ul>
    </div>
    <div id="ech_3"></div>
  </div>
</template>
<script>
export default {
   props:{
        da24:{
            type:null,
            default:{}
        }
    },
  methods: {
    draw() {
      let myChart = this.$echarts.init(document.getElementById("ech_3"));
      var option = {
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.da24.hours,
          axisLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: "value",
            splitArea: {
              show: true
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            type: "value",
            min: 0,
            max: 250,
            position: "right",
            offset: 0,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              formatter: "{value} k"
            }
          }
        ],
        series: [
          {
            name: "订单数",
            type: "line",
            data: this.da24.orderCountList,
            itemStyle: {
              color: "#615AD1"
            }
          },
          {
            name: "充值金额",
            type: "line",
            data: this.da24.rechargeAmountList,
            itemStyle: {
              color: "#F3AE6E"
            }
          },
          {
            name: "销售额(w)",
            type: "line",
            data:this.da24.orderAmountList,
            itemStyle: {
              color: "#7957B9"
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  },
  mounted() {
  
  },
  watch:{
    da24(e){
        this.draw();
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  height: 480px;
  background: #fff;
}
#ech_3 {
  width: 100%;
  height: 400px;
}
.ech-title {
  overflow: hidden;
  padding-top: 15px;
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
  p {
    color: #555;
    font-size: 18px;
  }
  ul {
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
    li {
      display: flex;
      align-items: center;
      margin: 0 10px;
      span {
        margin-left: 10px;
        color: #555;
      }
    }
  }
}
</style>